import React from 'react'
import '../styles/JSXReference.css'

function JSXReference() {
  return (
    <div className="jsx-reference">
      <h2>📚 JSX 语法参考</h2>
      
      <div className="reference-grid">
        {/* 基本语法 */}
        <div className="reference-card">
          <h3>🏷️ 基本语法</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>HTML 标签</h4>
              <pre>{`<div>内容</div>
<h1>标题</h1>
<p>段落</p>`}</pre>
            </div>
            
            <div className="example">
              <h4>自闭合标签</h4>
              <pre>{`<img src="image.jpg" />
<input type="text" />
<br />`}</pre>
            </div>
          </div>
        </div>

        {/* 属性语法 */}
        <div className="reference-card">
          <h3>🔧 属性语法</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>HTML 属性 → camelCase</h4>
              <pre>{`class → className
tabindex → tabIndex
for → htmlFor
onclick → onClick`}</pre>
            </div>
            
            <div className="example">
              <h4>布尔属性</h4>
              <pre>{`<input disabled={true} />
<button disabled={false} />
<input required />`}</pre>
            </div>
          </div>
        </div>

        {/* JavaScript 表达式 */}
        <div className="reference-card">
          <h3>💻 JavaScript 表达式</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>变量插值</h4>
              <pre>{`const name = "React"
<h1>Hello, {name}!</h1>
<p>计算: {2 + 2}</p>`}</pre>
            </div>
            
            <div className="example">
              <h4>对象属性</h4>
              <pre>{`const user = { name: "张三" }
<p>姓名: {user.name}</p>
<div style={{color: 'red'}}>`}</pre>
            </div>
          </div>
        </div>

        {/* 条件渲染 */}
        <div className="reference-card">
          <h3>🔀 条件渲染</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>三元运算符</h4>
              <pre>{`{isLoggedIn ? (
  <p>欢迎回来!</p>
) : (
  <p>请登录</p>
)}`}</pre>
            </div>
            
            <div className="example">
              <h4>逻辑与</h4>
              <pre>{`{isVisible && <p>内容可见</p>}
{count > 0 && <span>数量: {count}</span>}`}</pre>
            </div>
          </div>
        </div>

        {/* 列表渲染 */}
        <div className="reference-card">
          <h3>📋 列表渲染</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>map 方法</h4>
              <pre>{`const items = ['苹果', '香蕉']
<ul>
  {items.map((item, index) => (
    <li key={index}>{item}</li>
  ))}
</ul>`}</pre>
            </div>
            
            <div className="example">
              <h4>对象数组</h4>
              <pre>{`const users = [
  {id: 1, name: '张三'},
  {id: 2, name: '李四'}
]
{users.map(user => (
  <div key={user.id}>{user.name}</div>
))}`}</pre>
            </div>
          </div>
        </div>

        {/* 事件处理 */}
        <div className="reference-card">
          <h3>🎯 事件处理</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>点击事件</h4>
              <pre>{`<button onClick={handleClick}>
  点击我
</button>

<button onClick={() => alert('Hello!')}>
  内联函数
</button>`}</pre>
            </div>
            
            <div className="example">
              <h4>表单事件</h4>
              <pre>{`<input onChange={handleChange} />
<form onSubmit={handleSubmit}>
  <button type="submit">提交</button>
</form>`}</pre>
            </div>
          </div>
        </div>

        {/* 样式处理 */}
        <div className="reference-card">
          <h3>🎨 样式处理</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>内联样式</h4>
              <pre>{`<div style={{
  color: 'red',
  fontSize: '16px',
  backgroundColor: 'blue'
}}>
  内联样式
</div>`}</pre>
            </div>
            
            <div className="example">
              <h4>CSS 类名</h4>
              <pre>{`<div className="container">
  CSS 类名
</div>

<div className={\`btn \${isActive ? 'active' : ''}\`}>
  动态类名
</div>`}</pre>
            </div>
          </div>
        </div>

        {/* 特殊属性 */}
        <div className="reference-card">
          <h3>⚡ 特殊属性</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>dangerouslySetInnerHTML</h4>
              <pre>{`<div dangerouslySetInnerHTML={{
  __html: '<p>HTML 内容</p>'
}} />`}</pre>
            </div>
            
            <div className="example">
              <h4>ref 属性</h4>
              <pre>{`const inputRef = useRef()

<input ref={inputRef} />
<button onClick={() => inputRef.current.focus()}>
  聚焦输入框
</button>`}</pre>
            </div>
          </div>
        </div>

        {/* 常见错误 */}
        <div className="reference-card error-card">
          <h3>❌ 常见错误</h3>
          <div className="syntax-examples">
            <div className="example">
              <h4>属性名错误</h4>
              <pre>{`❌ <div class="container">
✅ <div className="container">

❌ <input onclick={handleClick}>
✅ <input onClick={handleClick}>`}</pre>
            </div>
            
            <div className="example">
              <h4>缺少 key</h4>
              <pre>{`❌ {items.map(item => <li>{item}</li>)}
✅ {items.map((item, index) => 
  <li key={index}>{item}</li>
)}`}</pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default JSXReference 